import React, { Component } from "react";
import { TabBar } from "antd-mobile";
import {
    HomeOutlined,
    AppstoreOutlined,
    ShoppingCartOutlined,
    UserOutlined,
} from "@ant-design/icons";
import { withRouter } from "react-router-dom";

class Footer extends Component {
    state = {
        cateData: [
            {
                title: "首页",
                key: "home",
                icon: <HomeOutlined style={{ fontSize: "20px" }} />,
                selectedIcon: <HomeOutlined style={{ fontSize: "20px",color: "#33A3F4" }} />,
            },

            {
                title: "分类",
                key: "cate",
                icon: <AppstoreOutlined style={{ fontSize: "20px" }} />,
                selectedIcon: <AppstoreOutlined style={{ fontSize: "20px",color: "#33A3F4" }} />,
            },

            {
                title: "购物车",
                key: "cart",
                icon: <ShoppingCartOutlined style={{ fontSize: "20px" }} />,
                selectedIcon: <ShoppingCartOutlined style={{ fontSize: "20px",color: "#33A3F4" }} />,
            },

            {
                title: "我的",
                key: "user",
                icon: <UserOutlined style={{ fontSize: "20px" }} />,
                selectedIcon: <UserOutlined style={{ fontSize: "20px",color: "#33A3F4" }} />,
            },
        ],
    };

    rendeCate = () => {
        let { cateData } = this.state;
        let { history,location } = this.props;
        return (
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
            >
                {cateData &&
                    cateData.map((item) => (
                        <TabBar.Item
                            title={item.title}
                            key={item.key}
                            icon={item.icon}
                            selectedIcon={item.selectedIcon}
                            selected={location.pathname === `/${item.key}`}
                            onPress={() => history.push("/" + item.key)}
                        />
                    ))}
            </TabBar>
        );
    };

    render() {
        return (
            <div className="footer">
                {/* 底部信息 */}
                {this.rendeCate()}
            </div>
        );
    }
}

export default withRouter(Footer);